<template>
  <a-menu
    theme="dark"
    mode="inline"
    :default-open-keys="[currentFolder]"
    :selected-keys="[currentPage]"
  >
    <a-sub-menu
      v-for="route in $store.getters['menuRoute/menus']"
      :key="route.name"
    >
      <span slot="title">
        <a-icon :type="route.meta.icon" v-if="route.meta.icon" />
        <span>{{ route.meta.title }}</span>
      </span>
      <a-menu-item v-for="sub in route.children" :key="sub.name">
        <RouterLink :to="{ name: sub.name }">
          <a-icon :type="sub.meta.icon" v-if="sub.meta.icon" />
          {{ sub.meta.title }}
        </RouterLink>
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>

<script>
export default {
  created() {},
  computed: {
    currentFolder() {
      return this.$router.currentRoute.matched[0].name || '';
    },
    currentPage() {
      return this.$route.name || '';
    },
  },
};
</script>
